<template>

        <!--    <h2>我是餐桌管理</h2>/-->
        <div>
            <el-tabs type="border-card">
                <el-tab-pane label="餐桌管理">
                    <div class="chaxun">
                        <el-input
                                placeholder="请输入餐桌号码/餐桌状态"
                                v-model="input"
                                clearable class="search">
                        </el-input>
                        <el-button type="primary" @click="selectCan"><i class="el-icon-search"></i></el-button>
                    </div>
                    <div class="biao">
                        <el-table
                                :data="currentData"
                                border
                                style="width: 85%"
                                :cell-style="cell_style"
                                :header-cell-style="header_style"

                        >
                            <!--                设置表格文字居中-->
                            <el-table-column
                                    prop="number"
                                    label="餐桌号码"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="peopleNum"
                                    label="可就餐人数"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="state"
                                    label="餐桌状态">
                            </el-table-column>
                            <el-table-column
                                    prop="type"
                                    label="餐桌类型"
                            >
                            </el-table-column>

                            <el-table-column
                                    label="操作"
                            >
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            type="primary"
                                            @click="handleEdit(scope.$index, scope.row)">修改
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div>
                        <el-pagination
                                background hide-on-single-page
                                layout="prev, pager, next"
                                :total="total"
                                :page-size="4"
                                :pager-count="5"
                                :current-page="currentPage"
                                @current-change="changePage"
                        >
                        </el-pagination>
                    </div>

                    <el-dialog title="修改餐桌信息" :visible.sync="dialogFormVisible" width="25%"
                               center>
                        <el-form :model="form" size="mini">


                            <el-form-item label="餐桌号码:" :label-width="formLabelWidth">
                                <p>{{form.number}}</p>
                            </el-form-item>
                            <el-form-item label="可就餐人数:" :label-width="formLabelWidth">
                                <p>{{form.peopleNum}}</p>
                            </el-form-item>
                            <el-form-item label="餐桌状态:" :label-width="formLabelWidth">
                                <el-select v-model="form.state" placeholder="请选择餐桌状态">
                                    <el-option label="占用" value="0"></el-option>
                                    <el-option label="可用" value="1"></el-option>
                                    <el-option label="" value=""></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="餐桌类型:" :label-width="formLabelWidth">
                                <el-select v-model="form.type" placeholder="请选择餐桌类型">
                                    <el-option label="方桌" value="方桌"></el-option>
                                    <el-option label="大圆桌" value="大圆桌"></el-option>
                                    <el-option label="" value=""></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="tijiao">提 交</el-button>
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                        </div>
                    </el-dialog>
                </el-tab-pane>
            </el-tabs>
        </div>

</template>



<script>

    import {mapActions, mapState} from 'vuex'
    import axios from '../../http/http'
    import * as api from '../../http/api'

    export default {
        name: "CanZhuoGuanLi",
        data() {
            return {
                input: '',
                tableData: [],
                currentPage: 1,//默认当前页为1
                //修改框数据
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    number: '',
                    peopleNum: '',
                    type: '',
                    state: '',
                },
                formLabelWidth: '100px',
                message: 555
            }

        },
        methods: {
            ...mapActions(['getcanZhuoData']),

            cell_style(row, column, rowIndex, columnIndex) {
                return ' text-align: center';
            },
            header_style(row, rowIndex) {
                return ' text-align: center';
            },
            //以上方法实现表格文字居中
            changePage(val) {
                this.currentPage=val
                // console.log(this.currentPage)
                // this.$store.pager.currentPage=val
                this.getcanZhuoData(val)
            },//点击改变当前页

            //修改


            handleEdit(index, item) {//修改框的表单拿到当前值
                this.dialogFormVisible = true
                // console.log(item.number)
                this.form.number = item.number
                this.form.peopleNum = item.peopleNum
                this.form.type = item.type
                this.form.state = item.state
            },
            //提交修改的方法
            tijiao() {
// console.log(this.form.type)
                axios({
                    url: api.EditCanZhuo,
                    method: 'post',
                    data:{
                        id: "string",
                        number: this.form.number,
                        state: this.form.state,
                        type: this.form.type,
                    }

                }).then(res => {
                    // console.log(res)
                    if (res.data.info=== "success") {
                        this.$message({
                            type: 'success',
                            message: '提交成功!'
                        });
                        this.getcanZhuoData()
                    } else  {
                        this.$message({
                            type: 'info',
                            message: '提交失败!请稍后再试！'
                        });
                    }
                    this.dialogFormVisible=false
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消修改'
                    });
                });


            },
            //查询
            ...mapActions(['selectCanZhuo']),
            selectCan(){
                let number=this.input


                if(this.input!=''){
                    this.selectCanZhuo(number)
                }else{
                    this.$alert('你还没有输入内容', '提示', {
                        confirmButtonText: '确定',

                    });
                    this.getcanZhuoData()
                }



            }


        },
        computed: {
            ...mapState({//计算vuex里面的数据
                currentData: function (state) {

                    return state.canzhuoStore.canZhuoData.canZhuoData
                },
                total:function (state) {
                    return state.canzhuoStore.pager.totalSize
                }

            }),





        },
        created() {
            this.getcanZhuoData()

        }
    }
</script>

<style scoped lang="less">

    .chaxun {
        width: 50%;
        float: right;
        padding: 10px;

        .search {
            width: 50%;
        }

        .el-button {
            margin-left: 20px;
        }
    }

    .biao {
        .el-table {
            margin: 0 auto;
            height: 330px;
        }
    }



</style>